<template>
  <tn-navbar fixed frosted-glass>virtualList虚拟列表</tn-navbar>

  <view class="virtual-list__container tn-safe-area-inset-bottom" :style="{
    height: `calc(100vh - ${customNavbar.height}px)`
  }">
    <tn-virtual-list :data="listData">
      <template v-slot="{item, index, tn_index}">
        <view
          class="item tn-flex-start-start"
        >
          <view class="left">
            <image class="image" :src="item.image"></image>
            <!-- <view class="image tn-bg-blue"></view> -->
          </view>
          <view class="right">
            <view class="title tn-col-12 tn-text-ellipsis-1 tn-text-bold tn-text-lg">{{ item.title }}-{{ index }}-{{ tn_index }}</view>

            <view class="info-item tn-col-12 tn-flex-center-between tn-color-gray">
              <view class="info-item__left tn-flex-row tn-flex-center-start">
                <view class="score tn-text-sm tn-color-orange"><text class="tn-text-bold">{{ item.score }}</text><text class="tn-text-xs">分</text></view>
                <view class="month-sale tn-text-sm tn-margin-left-xs">月售 {{ item.monthSale }}</view>
                <view class="per-capita tn-text-sm tn-margin-left-xs">人均 ¥{{ item.perCapita }}</view>
              </view>
              <view class="info-item__right">
                <tn-tag plain border shape="round" size="sm" color="tn-color-gray" :custom-style="customSmTagStyle">{{ item.express }}</tn-tag>
              </view>
            </view>

            <view class="info-item tn-col-12 tn-flex-center-between tn-color-gray">
              <view class="info-item__left tn-flex-row tn-flex-center-start">
                <view class="start-delivery tn-text-sm">起送 ¥{{ item.startDelivery }}</view>
                <view class="delivery tn-text-sm tn-margin-left-xs">配送 约 ¥{{ item.delivery }}</view>
              </view>
              <view class="info-item__right tn-flex-row">
                <view class="delivery-time tn-text-sm">{{ item.deliveryTime }}分钟</view>
                <view class="distance tn-text-sm tn-margin-left-xs">{{ item.distance }}m</view>
              </view>
            </view>

            <view class="tags tn-flex-row">
              <view
                v-if="item?.tags?.length > 0"
                v-for="(tagItem, tagIndex) in item.tags"
                :key="tagIndex"
                class="tag-item"
              >
                <tn-tag
                  bg-color="tn-bg-orange--light"
                  size="sm"
                  shape="round"
                >
                  {{ tagItem }}
                </tn-tag>
              </view>
            </view>

            <view class="discount tn-flex-row">
              <view
                v-if="item?.discount?.length > 0"
                v-for="(discountItem, discountIndex) in item.discount"
                :key="discountIndex"
                class="discount-item"
              >
                <tn-tag
                  color="tn-color-red"
                  size="sm"
                  shape="round"
                  plain
                  border
                  border-color="tn-border-red"
                  :custom-style="customSmTagStyle"
                >
                  {{ discountItem }}
                </tn-tag>
              </view>
            </view>
          </view>
        </view>
        <view class="item-gap"></view>
      </template>
    </tn-virtual-list>
  </view>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref, CSSProperties, computed } from 'vue'
import { docContent } from './lib/doc'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'
import TnNavbar from '@/tuniao-ui/components/tn-navbar/src/Navbar.vue'

import TnVirtualList from '@/tuniao-ui/components/tn-virtual-list/src/VirtualList.vue'

import TnTag from '@/tuniao-ui/components/tn-tag/src/Tag.vue'

import useSystemInfo from '@/tuniao-ui/libs/hooks/useSystemInfo'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

const { customNavbar } = useSystemInfo()

const customSmTagStyle: CSSProperties = {
  padding: '2rpx 6rpx'
}

const itemHeight = computed<number>(() => {
  return uni.upx2px(280)
})
console.log(itemHeight.value);

type ListData = {
  id: number,
  image: string,
  title: string,
  score: string,
  monthSale: number,
  perCapita: number,
  startDelivery: number,
  delivery: number,
  express: string,
  deliveryTime: number,
  distance: number,
  tags: string[],
  discount: string[]
}

// 图片数据
const imageData: string[] = [
  'https://tnuiimage.tnkjapp.com/shop/bag1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/bag2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/cup1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/cup2.jpg',
  'https://tnuiimage.tnkjapp.com/shop/card.jpg',
  'https://tnuiimage.tnkjapp.com/shop/prototype1.jpg',
  'https://tnuiimage.tnkjapp.com/shop/prototype2.jpg'
]

// 模拟多条数据
let listData = ref<ListData[]>([])
const generateListData = () => {
  for (let i = 0; i < 1000; i++) {
    listData.value.push({
      id: i,
      image: imageData[i % 7],
      title: `图鸟小餐厅${i}号店`,
      score: '5.0',
      monthSale: 6666,
      perCapita: 18,
      startDelivery: 20,
      delivery: 0,
      express: '图鸟快送',
      deliveryTime: 30,
      distance: 1,
      tags: [
        '服务超级好的',
        '近期210人好评'
      ],
      discount: [
        '30减6',
        '50减20'
      ]
    })
  }
}
generateListData()
</script>

<style lang="scss" scoped>

.virtual-list {
  &__container {
    width: 100%;
    // height: calc(100vh - 60px);
    // background-color: #E6E6E6;
    // padding: 30rpx;

    .item {
      position: relative;
      width: calc(100% - 60rpx);
      height: 250rpx;
      border-radius: 15rpx;
      box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
      overflow: hidden;
      margin: 0rpx 30rpx;
      padding: 22rpx;
      background-color: #FFFFFF;
      line-height: 1;
      // opacity: 0;
      // animation: enterAnimation 0.25s ease 0.1s 1 forwards;

      .left {
        width: 200rpx;
        height: 200rpx;
        border-radius: 15rpx;
        overflow: hidden;

        .image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 15rpx;
          will-change: transform;
        }
      }

      .right {
        flex: 1;
        width: 100%;
        margin-left: 20rpx;

        .info-item {
          margin-top: 8rpx;
        }

        .tags, .discount {
          margin-top: 10rpx;
        }
        .tag-item, .discount-item {
          margin-left: 10rpx;
          &:first-child {
            margin-left: 0rpx;
          }
        }
      }
    }
    .item-gap {
      width: 100%;
      height: 30rpx;
    }
  }
}

@keyframes enterAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
